<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>人员名单</title>
		<link rel="stylesheet" href="/static/css/common.css">
		<link rel="stylesheet" href="/static/css/function.css">
		<link rel="stylesheet" href="/static/css/table.css">
		<script src="/static/js/jquery2.js"></script>
	</head>
	<body>
		<nav>
			<button id="enter" type="button" onclick="enter()">
				<img src="/static/image/菜单.png" alt="菜单" width="27px">
			</button>
	
			<div id="user" onmouseover="staff_show()">
				<img src="/static/image/用户.jpg" width="30px">
				<div style="display: none;">
					<ul>
						<li>用户名<br/></li>
						<li>电话号码<br/></li>
						<li>邮箱<br/></li>
					</ul>
				</div>
			</div>
			<button id="showPopup" onclick="showPopup()">员工事务管理</button>
			<div id="overlay">
			  <div class="popup">
				<button id="close" type="button" onclick="hidePopup()">
					<img src="/static/image/错误.png" alt="关闭" width="100%">
				</button>
				<div class="popup_content">
					<form method="post" action="http://127.0.0.1:8880/api/staff-data-deal">
						<fieldset>
							<legend>添加人员</legend>
							<p>
								<label>用户名：<input type="text" placeholder="请输入用户名" name="username"></label>
								<br><br>
								<label>密码：<input type="password" placeholder="请输入密码" name="password"></label>
								<br><br>
								<label>手机号：<input type="text" placeholder="请输入手机号" name="phonenumber"></label>
								<br><br>
								<label>电子邮箱：<input type="email" placeholder="请输入邮箱" name="email"></label>
								<br><br>
								<label>
									职务：
									<select name="job_id">
										<option value="" label=""></option>
										<option value="1" label="管理员"></option>
										<option value="2" label="监测人员"></option>
										<option value="3" label="维修人员"></option>
									</select>
								</label>	
						</fieldset>
						<br>
						<fieldset>
							<legend>分配权限</legend>
							<p>
								序号:
								<select name="assign_staff_id" style="margin-right: 20px;">
									<option value="" label=""></option>
								</select>
								职务:
								<select name="assign_job_id">
									<option value="" label=""></option>
									<option value="1" label="管理员"></option>
									<option value="2" label="监测人员"></option>
									<option value="3" label="维修人员"></option>
								</select>
							</p>
						</fieldset>
						<br>
						<fieldset>
							<legend>删除人员</legend>
							<p>
								序号:
								<select name="del_staff_id">
									<option value="" label=""></option>
								</select>
							</p>
						</fieldset>
						<br>
						<div class="popup_btn">
							<button type="reset">重置</button>
							<button type="submit">确认</button>
						</div>
					</form>
				</div>
			  </div>
		  	</div>
			<button id="exit" type="button" onclick="exit()">退出</button>
			<div id="menu">
				<button id="leave" type="button" onclick="leave()">
					<img src="/static/image/离开.png" alt="离开" width="20px">
				</button>
				<ul>
					<li><a href="/chart">数据实时监测图</a></li>
					<li><a href="/excel?q=device">设备数据表</a></li>
					<li><a href="/excel?q=alarm">异常数据表</a></li>
					<li style="background-color: grey;"><a href="/excel?q=staff">人员名单</a></li>
				</ul>
			</div>
		</nav>
		<div id="mask"></div>
		<div id="container">
			<table>
				<caption>人员名单</caption>
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>电话号码</th>
						<th>邮箱</th>
						<th>职位</th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
		<script type="application/javascript" src="/static/js/interact.js"></script>
		<script type="application/javascript" src="/static/js/excel_data.js"></script>
		<script>
			// 处理报警事务或人员管理用到的按钮（右上角），对应的点击事件回调函数，用于弹出窗口
			function showPopup(){
				var overlay = document.getElementById("overlay");
				overlay.style.display = "block";
			}
			// 处理报警事务或人员管理用到的按钮（右上角），对应的点击事件回调函数，用于关闭弹出窗口
			function hidePopup(){
				var overlay = document.getElementById("overlay");
				overlay.style.display = "none";
			}
			// 填充 处理报警事务或人员管理用到的按钮（右上角） 的弹出窗口
			// 将数据的序号填充到选项列表中
			// 和alarm_excel.html同名的函数不一样
			function set_options(){
					let fieldsets = document.querySelectorAll("fieldset");
					let nums = document.querySelectorAll("td:nth-of-type(1)");
					for (let i = 1; i < fieldsets.length; i++){
						let select = fieldsets[i].querySelectorAll("select")[0];
						let strHtml = "";
						for (let j = 0; j < nums.length; j++){
							num = nums[j];
							strHtml += `<option value="${ num.textContent }" label="${ num.textContent }"></option>`;
						}
						select.insertAdjacentHTML("beforeend", strHtml);
					}
			}
			// 替换表中的null值
			function rep_null(){
				let tds = document.getElementsByTagName("td");
				for (const td of tds){
					if (td.textContent == "null"){
						td.textContent = "(暂无)";
						td.style.color = "gray";
					}
				}
			}
			// 将上述操作整合
			function total(){
				per_show();  // 定义在interact.js文件中
				nav_show();  // 定义在interact.js文件中
				set_options();
				rep_null();
			}
			setTimeout(total,500); // 设置函数延迟执行，以防止数据还未送达就先一步执行
		</script>
	</body>
</html>
